<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootbox按需包装</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="http://www.chendd.cn/app/images/favicon.ico" type="image/x-icon" />
<link href="prism/prism.css" rel="stylesheet" />
<link href="../bootstrap.min.css" rel="stylesheet" />
<link href="plugins/dialog.css" rel="stylesheet" />
</head>
<body>

<button type="button" onclick="runCode('alert_basic')">alert-基本</button>
<pre id="alert_basic" class="language-javascript line-numbers"><code>$.alert("hello, chendd!");</code></pre>

<button type="button" onclick="runCode('alert_callback')">alert-回调函数</button>
<pre id="alert_callback" class="language-javascript line-numbers"><code>$.alert("hello, chendd!" , function(){
    alert("callback...!");
});</code></pre>

<button type="button" onclick="runCode('alert_title')">alert-标题</button>
<pre id="alert_title" class="language-javascript line-numbers"><code>$.alert("hello, chendd!", null , "来自网页的消息");</code></pre>

<button type="button" onclick="runCode('alert_icon_success')">alert-图标</button>
<pre id="alert_icon_success" class="language-javascript line-numbers"><code>//全参调用
$.alert("hello, chendd!", null , null , "success");
//简化调用
$.alert.success("用户保存成功!");
$.alert.warn("该用户为异常状态!");
$.alert.error("用户保存失败!");
</code></pre>

<hr/>

<button type="button" onclick="runCode('confirm_basic')">confirm-基本</button>
<pre id="confirm_basic" class="language-javascript line-numbers"><code>$.confirm("确定是要删除吗?" , function(result){
    alert("result: " + result);
});</code></pre>

<hr/>

<button type="button" onclick="runCode('loading_basic')">loading层等待与关闭</button>
<pre id="loading_basic" class="language-javascript line-numbers"><code>//打开loading，2秒钟后关闭
$.loading.show("正在加载中...");
setTimeout($.loading.hide , 2000);
</code></pre>

<hr/>

<pre data-src="plugins/dialog.js" class="language-javascript line-numbers"></pre>

为什么要包装，窗口大小不太合适、窗口图标不太给力

<script src="../jquery/jquery.min.js"></script>
<script src="../bootstrap.min.js"></script>
<script src="prism/prism.js"></script>
<script src="bootbox/bootbox.all.min.js"></script>
<script src="plugins/dialog.js"></script>
<script type="text/javascript">
//运行js函数
function runCode(codeId){
    var code = document.getElementById(codeId).innerText;
    eval(code);
}
</script>
</body>
</html>